<template>
  <div>
    <div class="edit_box">
        <el-form ref="form" :model="form" :rules="rules" label-width="120px">
          <el-form-item label="题目名称" prop="title">
            <editor v-model="form.title" :min-height="140"/>
          </el-form-item>
          <el-form-item label="题目描述" prop="desc">
            <editor v-model="data.desc" :min-height="140"/>
          </el-form-item>
          <el-form-item label="输入格式" prop="inputFormat">
            <editor v-model="data.inputFormat" :min-height="140"/>
          </el-form-item>
          <el-form-item label="输出格式" prop="outputFormat">
            <editor v-model="data.outputFormat" :min-height="140"/>
          </el-form-item>
          <el-form-item label="数据样例" prop="demo">
            <el-row>
              <el-col span="12">
                <el-tabs type="border-card">
                  <el-tab-pane label="Input">
                    <el-input type="textarea" :rows="3" placeholder="" v-model="data.input"></el-input>
                  </el-tab-pane>
                </el-tabs>
              </el-col>
              <el-col span="1"><br/></el-col>
              <el-col span="11">
                <el-tabs type="border-card">
                  <el-tab-pane label="Output">
                    <el-input type="textarea" :rows="3" placeholder="" v-model="data.output"></el-input>
                  </el-tab-pane>
                </el-tabs>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item label="测试数据" prop="test">
            <FileUpload :limit="1" :fileType="null" :fileSize="2000" @input="handleUploadSuccess"/>
          </el-form-item>
          <el-form-item label="内存限制" prop="ramLimit">
            <el-input v-model="data.ramLimit" placeholder="超出定义值后停止运行用户脚本，最大定义值不能超过 512Mb" />
          </el-form-item>
          <el-form-item label="时间限制" prop="timeLimit">
            <el-input v-model="data.timeLimit" placeholder="超出定义值后停止运行用户脚本，建议范围：100 ~ 5000毫秒" />
          </el-form-item>
          <el-form-item label="编程语言" prop="lang">
            <el-select v-model="data.lang" placeholder="编程语言" clearable size="small">
                <el-option
                  v-for="dict in dict.type.edu_code_lang"
                  :key="dict.value"
                  :label="dict.label"
                  :value="dict.value"
                />
              </el-select>
          </el-form-item>
          <el-form-item label="分数" prop="score">
            <el-input v-model="form.score" placeholder="请输入分数" />
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="handleSubmit">确 定</el-button>
          <el-button @click="handleCancel">取 消</el-button>
        </div>
      </div>
  </div>
</template>

<script>

export default {
  name: "Program",
  dicts: ['sys_bool_status', 'edu_code_lang'],
  props: {
    form: {
      type: Object,
      default: function(){
        return {
          id: undefined,
          courseId: undefined,
          title: undefined,
          type: '4',
          content: undefined,
          score: undefined,
          analysis: undefined
        }
      }
    }
  },
  data() {
    return {
      data: {
        desc: undefined,
        inputFormat: undefined,
        outputFormat: undefined,
        input: undefined,
        output: undefined,
        test: undefined,
        ramLimit: undefined,
        timeLimit: undefined,
        lang: undefined
      },
      rules: {
        title: [
          { required: true, message: "题干不能为空", trigger: "blur" }
        ],
        score: [
          { required: true, message: "分数不能为空", trigger: "blur" },
          { type: 'number', message: '分数必须为数字值'}
        ]
      }
    };
  },
  computed: {
  },
  watch: {
    form: {
      handler(val) {
        if(this.form.content){
          this.data = JSON.parse(this.form.content)
        }
      },
      deep: true,
      immediate: true
    }
  },
  mounted() {
  },
  beforeDestroy() {
  },
  methods: {
    handleDeleteRow(index){
      this.data.answer.splice(index, 1);
      for(let i = 0; i < this.data.answer.length; i++){
        this.data.answer[i].index = i + 1;
      }
    },
    handleSubmit(){
      this.form.content = JSON.stringify(this.data);
      console.log(this.form)
      this.$emit("submit", this.form);
    },
    handleCancel(){
      this.$emit("cancel", {});
    }
  },
};
</script>

<style lang="scss" scoped>
  .dialog-footer{
    text-align: center;
  }
  .edit_box{
    height: 600px;
    overflow: auto;
  }
</style>
